<template>
  <div>
    <Echart
        :options="options"
        id="centreRight1Chart"
        height="363px"
        width="472px"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
import { isNotEmpty } from '@/utils'

export default {
  data() {
    return {
      options: {},
    }
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        if (!isNotEmpty(newData)) return
        this.getData(newData)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    getData(v) {
      const {categories, data} = v
      this.options = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['警情总量', '同期警情量'],
          top: 12,
          itemWidth: 8,
          itemHeight: 8,
        },
        grid: {
          top: '40px',    // 调整上边距，根据需要修改
          bottom: '23px', // 调整下边距，根据需要修改
          left: '18px',
          containLabel: true

        },
        // 横向柱状图：xAxis 为数值轴，yAxis 为类目轴
        xAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {color: '#A7C5D9'}
          },
          axisLabel: {color: '#A7C5D9'}
        },
        yAxis: {
          type: 'category',
          data: categories,
          axisLine: {
            lineStyle: {color: '#A7C5D9'}
          },
          axisLabel: {color: '#A7C5D9',}
        },
        series: [
          {
            name: '警情总量',
            type: 'bar',
            data: data[0],
            barWidth: 14,
            itemStyle: {color: '#16B3E0'},
            // 如需要两个系列紧挨，可设置 barGap 为 0
            barGap: 0
          },
          {
            name: '同期警情量',
            type: 'bar',
            barWidth: 14,
            data: data[1],
            itemStyle: {color: '#BCB155'}
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
